<template>

    <div class="contact-list">
        <el-scrollbar class="list-container">
            <div class="contact-item" v-for="f in friends">
                <!-- 头像 -->
                 <el-avatar class="avatar" :size="40" src="https://img1.baidu.com/it/u=781435481,24052815&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
                 <!-- <img src="../assets/avatar/avatar1.png" class="avatar" /> -->

                 <!-- 联系人名称 和 最后一条消息 -->
                 <div class="contact-info">
                    <div class="username">{{ f.remark }}</div>
                    <div class="last-message">你好！</div>
                 </div>
                 <!-- 最后消息时间 -->
                  <div class="last-time">09：15</div>
            </div>
        </el-scrollbar>
    </div>
</template>


<script setup lang="ts">
import axios from '../api/axios'
import {ref} from 'vue'

const userStr = localStorage.getItem('user')
const u = userStr ? JSON.parse(userStr) : null


const friends = ref(null)
const get_friends = ()=>{
    axios.get('/get_friends',{
        params:{
            userId : u.id
        }
    }).then(res=>{
        friends.value = res.data.friends
    })
}

get_friends()
</script>

<style lang="scss" scoped>
    @use '../assets/contactList.scss'
</style>